<template>
  <div class="page-container-padding">
    <!-- 模块 -->
    <div class="module-box">
      <vab-icon :icon="['fas', 'check-circle']" class="icon"></vab-icon>
      <span class="module-name">授权申请</span>
    </div>
    <!-- 申请表单 -->
    <div style="width: 500px">
      <el-form
        ref="ApplyForm"
        :model="applyObj"
        :rules="formRules"
        label-width="100px"
        label-position="right"
      >
        <el-form-item label="联系人" prop="linkman">
          <el-input
            v-model="applyObj.linkman"
            placeholder="请输入联系人名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系方式" prop="link_msg">
          <el-input
            v-model="applyObj.link_msg"
            placeholder="请输入您的联系方式"
          ></el-input>
        </el-form-item>
        <el-form-item label="授权平台" prop="apply_plat">
          <el-input
            v-model="applyObj.apply_plat"
            placeholder="请输入您所申请的授权平台"
          ></el-input>
        </el-form-item>
        <el-form-item label="授权内容" prop="apply_msg">
          <el-input
            v-model="applyObj.apply_msg"
            type="textarea"
            placeholder="请输入您所申请的授权内容"
          ></el-input>
        </el-form-item>
        <el-form-item label="用途" prop="use_to">
          <el-input
            v-model="applyObj.use_to"
            type="textarea"
            placeholder="请输入您所申请的授权用途"
          ></el-input>
        </el-form-item>
        <el-form-item label="申请备注" prop="apply_notes">
          <el-input
            v-model="applyObj.apply_notes"
            type="textarea"
            placeholder="请输入申请备注"
          ></el-input>
        </el-form-item>
        <el-form-item label="方案文件 ">
          <meta http-equiv="Access-Control-Allow-Origin" content="*" />
          <el-upload
            ref="upload"
            action=""
            :auto-upload="false"
            :limit="1"
            :multiple="false"
            :on-exceed="handleExceed"
            :before-upload="() => false"
            :on-change="fileSelectChange"
          >
            <el-button slot="trigger" size="medium" type="text">
              点击选择
            </el-button>
            <span>上传授权模板文件(如有)</span>
          </el-upload>
        </el-form-item>
      </el-form>
      <div style="display: flex; justify-content: flex-end">
        <el-button>取消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="toSubmit">
          确定提交
        </el-button>
      </div>
    </div>
  </div>
</template>
<script>
  import { CreateShouquanRecord } from '@/api/prodService/shouquan'
  export default {
    data() {
      return {
        submitLoading: false,
        applyObj: {
          linkman: '',
          link_msg: '',
          apply_msg: '',
          apply_plat: '',
          use_to: '',
          apply_notes: ' ',
          model_file: null,
        },
        annexFilename: '',

        formRules: {
          linkman: [
            { required: true, message: '请输入联系人', trigger: 'change' },
          ],
          link_msg: [
            { required: true, message: '请输入联系方式', trigger: 'change' },
          ],
          apply_msg: [
            {
              required: true,
              message: '请输入所需的授权内容',
              trigger: 'change',
            },
          ],
          apply_plat: [
            {
              required: true,
              message: '请输入所申请的授权平台',
              trigger: 'change',
            },
          ],
          use_to: [
            {
              required: true,
              message: '请输入所申请的授权用途',
              trigger: 'change',
            },
          ],
        },
        fileList: [],
      }
    },
    mounted() {},
    methods: {
      fileSelectChange(file) {
        // 截取上传文件的后缀名
        let fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
        // 判断文件名的类型，允许多种就判断多个
        if (['pdf', 'doc', 'docx', 'ppt', 'pptx'].indexOf(fileType) < 0) {
          this.$baseMessage('只能上传pdf,docx,pptx类型的文件!', 'error')
          this.$refs.upload.clearFiles()
          return
        }
        this.annexFilename = file.name
        this.applyObj.model_file = file.raw
      },
      handleExceed() {
        this.$message({ type: 'error', message: '最多支持1个附件上传' })
      },
      toSubmit() {
        this.$refs.ApplyForm.validate((validate) => {
          if (!validate) {
            return
          }
          let formData = new FormData()
          const bodyData = {
            linkman: this.applyObj.linkman,
            link_msg: this.applyObj.link_msg,
            apply_msg: this.applyObj.apply_msg,
            apply_plat: this.applyObj.apply_plat,
            use_to: this.applyObj.use_to,
            apply_notes: this.applyObj.apply_notes,
          }
          formData.append('body_data', JSON.stringify(bodyData))
          if (this.applyObj.model_file !== null) {
            formData.append('file', this.applyObj.model_file) //把文件实体添加到表单对象
          }
          this.submitLoading = true
          CreateShouquanRecord(formData)
            .then((res) => {
              this.$baseMessage(res.msg, 'success')
              this.submitLoading = false
            })
            .catch((err) => {
              this.submitLoading = false
            })
        })
      },
    },
  }
</script>
<style scoped lang="scss">
  .module-box {
    padding: 4px 6px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 5px 5px 0 0;
    margin-bottom: 16px;
    .icon {
      color: #fd5516;
    }
    .module-name {
      margin-left: 10px;
    }
  }
</style>
